import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
import {GlobalState} from '../../../global.state';
import {layoutSizes} from '../../../theme';
import {MENU, ADMIN_MENU} from '../../../../app/app.menu';
import * as _ from 'lodash';
import {AuthenticationHelper} from  '../../../app.authentication';
import {UserService} from  '../../../services/app.user';

@Component({
    selector: 'ba-sidebar',
    encapsulation: ViewEncapsulation.None,
    styles: [require('./baSidebar.scss')],
    template: require('./baSidebar.html')
})
export class BaSidebar {

    // here we declare which routes we want to use as a menu in our sidebar
    public routes = _.cloneDeep(MENU);
    public showRoutes = false;
    public menuHeight:number;
    public isMenuCollapsed:boolean = false;
    public isMenuShouldCollapsed:boolean = false;


    constructor(private _elementRef:ElementRef, private _state:GlobalState,
                private _authentcation:AuthenticationHelper, private userService:UserService) {
        if (this._authentcation.hasUser() && this._authentcation.isAdmin()) {
            this.routes = _.cloneDeep(ADMIN_MENU);
            this.showRoutes = true;
        } else if (!this._authentcation.hasUser()) {
            this.userService.getuserInfo().subscribe(
                data => this.isAdmin(data),
                error => {
                });
        } else {
            this.showRoutes = true;
        }
        this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
            this.isMenuCollapsed = isCollapsed;
        });
    }

    public ngOnInit():void {
        if (this._shouldMenuCollapse()) {
            this.menuCollapse();
        }
    }

    public isAdmin(user) {
        console.log("baSidebar");
        this._authentcation.setUser(user);
        if (this._authentcation.isAdmin()) {
            this.routes = _.cloneDeep(ADMIN_MENU);
        }
        this.showRoutes = true;
        this._state.notifyDataChanged('menu.changed', this.isMenuCollapsed);
    }

    public ngAfterViewInit():void {
        setTimeout(() => this.updateSidebarHeight());
    }

    @HostListener('window:resize')
    public onWindowResize():void {

        let isMenuShouldCollapsed = this._shouldMenuCollapse();

        if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
            this.menuCollapseStateChange(isMenuShouldCollapsed);
        }
        this.isMenuShouldCollapsed = isMenuShouldCollapsed;
        this.updateSidebarHeight();
    }

    public menuExpand():void {
        this.menuCollapseStateChange(false);
    }

    public menuCollapse():void {
        this.menuCollapseStateChange(true);
    }

    public menuCollapseStateChange(isCollapsed:boolean):void {
        this.isMenuCollapsed = isCollapsed;
        this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
    }

    public updateSidebarHeight():void {
        this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
    }

    private _shouldMenuCollapse():boolean {
        return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
    }
}
